<template>
	<view>
		<z-nav-bar backState="1000" type="transparentFixed">商品详情</z-nav-bar>
		
		<view style="margin-top: 50%;">
			
			<!-- <view class="u-text-center" style="margin-bottom: 80rpx;">
				<text class="u-font-36 text-bold">特惠码登录</text>
			</view> -->
			<view class="u-p-l-30" >
				<u-tabs
					:list="tabMenuList"
					lineWidth="0"
					:activeStyle="{
						color: '#C16D09',
						fontWeight: 'bold',
						fontSize:'32rpx',
						transform: 'scale(1)'
					}"
					:inactiveStyle="{
						color: '#404040',
						fontSize:'28rpx',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 0rpx; padding-right: 30rpx; height: 34px;"
					:current="tabCurrentIndex"
					@change="handleTabMenuChange">
				</u-tabs>
			</view>
			<view class="u-p-30 bg-white u-m-30 b-r-30" >
				<u-form :labelStyle="{fontWeight:'bold'}" labelPosition="left" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<template v-if="tabCurrentIndex == 0">
						<u-form-item label="特惠码" label-width="80" prop="couponCode" >
							<u-input placeholder="请输入特惠码" border="none" v-model="model.couponCode" type="text" ></u-input>
						</u-form-item>
					</template>
					<template v-else>
						<u-form-item label="员工" label-width="80" prop="userNo" borderBottom >
							<u-input placeholder="请输入员工" border="none" v-model="model.userNo" type="text" ></u-input>
						</u-form-item>
						
						<u-form-item label="手机号" label-width="80" label-position="left" prop="phone" >
							<u-input placeholder="请输入手机号" border="none" v-model="model.phone" type="number" ></u-input>
						</u-form-item>
					</template>
					
				</u-form>
			</view>
		</view>
		
		<view class="u-m-t-30 u-p-30">
			<u-button @click="handleSubmit"
					  shape="circle" 
					  :ripple="true" 
						:hairline="false"
						:customStyle="{'border':'#FF9D34','color':'#FFFFFF', 'background':'linear-gradient(270deg, #FF9D34 0%, #FFB455 45%, #FFCF7C 100%)'}">
					<text v-if="tabCurrentIndex == '0'">特惠码登录</text>
					<text v-else>内部员工登录</text>
			</u-button>
		</view>
		
	</view>
</template>

<script>
	import {userInnerLogin} from '@/api/user.js'
	import {jumpTypeEnum} from '@/common/const.js'
	import {mapGetters} from 'vuex'
	
	export default {
		data(){
			return{
				model:{
					userNo:'',
					phone:''
				},
				rules:{
					userNo:[
						{
							required: true,
							message: '请输入工号',
							trigger: 'change'
						},
					],
					phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: 'blur' ,
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					couponCode:[
						{
							required: true,
							message: '请输入特惠码',
							trigger: 'change'
						},
					],
				},
				errorType: 'toast',
				tabMenuList:[],
				tabCurrentIndex:0,
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.uForm.setRules(this.rules)
		},
		computed:{
			...mapGetters(['userInnerIsLogin', 'userInnerInfo']),
		},
		onLoad() {
			this.init()
		},
		methods:{
			
			/**
			 * 初始化
			 */
			init(){
				this.tabCurrentIndex = 0
				
				this.tabMenuList.push({name: '特惠码登录'})
				this.tabMenuList.push({name: '员工登录'})
			},
			
			/**
			 * 切换tab
			 */
			handleTabMenuChange(e){
				this.tabCurrentIndex = e.index
			},
			
			/**
			 * 登录
			 */
			handleSubmit(){
				let that = this
				this.$refs.uForm.validate().then(res => {
					if(this.tabCurrentIndex == 0){
						// 特惠码的场合
						this.model.type = '2'
					} else {
						// 员工登录的场合
						this.model.type = '1'
					}
					// 用户登录
					userInnerLogin(this.model).then(result=>{
						uni.showModal({
							title: '提示',
							content: '登录成功',
							showCancel:false,
							success: function (res) {
								console.log(that.model)
								that.$store.dispatch("setUserInnerIsLogin", {userInnerInfo:{phone: that.model.phone, userNo: that.model.userNo, type: that.model.type, couponCode: that.model.couponCode}})
								that.jumpUtil.jumpTo(jumpTypeEnum.redirect, `/pages_one/user_inner/goods/index`, false)
							}
						});
					})
				}).catch(errors => {
					//uni.$u.toast('校验失败')
				})
			},
			
		}
	}
</script>

<style>
	
</style>